<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Make widgets configurable in the  builder"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Make widgets configurable in builder</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-D60C30DF-13AE-4B3D-BC11-F5C2B0FD754F]--><body><div id="content"><div class="header"><h1>
Make widgets configurable in builder</h1><div id="breadcrumb"></div></div>
<p id="GUID-9415C017-0C83-48D4-94BA-1C2F9BF99E1F">If a widget is configurable, the widget's
behavior can be changed by editing the config.json file. For a better user
experience, the widget should provide a config UI to config itself
when it is configured in Web AppBuilder.</p>
<p id="GUID-DE6B9303-7BC7-441C-B849-A5799480B213">These are the conventions the widget should follow:</p>
<p id="GUID-F7C2D52B-A1B2-459C-AD1A-3CCDC2731BF6">
<ol purpose="ol" id="OL_C812EE6D3DA8411FAF19FAFE00D67805">
<li purpose="li" id="LI_56FCFF8E6B424FE699E280AC5F5C335C">Create a folder called setting to hold all of the setting
related files.</li>
<li purpose="li" id="LI_8F899FF04A874F7A82D42882B04B716A">Create a Setting.js file in the setting folder to hold the
config logic. This class should inherit from the
BaseWidgetSetting class. In this class, there is a config
property that holds the widget config data.</li>
<li purpose="li" id="LI_0618967F237B4265B25B4DC443B83FC0">This class should override two methods,
getConfig—to return the config data input by the user—and setConfig—to initialize the widget setting page
depending on the widget config data.</li>
<li purpose="li" id="LI_67374341942A44B1A78D54949B9C1962">Create a Setting.html file in the setting folder to hold the
config UI.</li>
<li purpose="li" id="LI_B3F89C2FA9B5476FABCC3E8A8AEE5802">Create a strings.js file in the setting/nls folder if the
config needs to support internationalization.</li>
<li purpose="li" id="LI_A65309B787B141AB81015CADE02FC095">Create a style.css file in the setting/css folder to hold the
css property.</li>
</ol>
</p>
<p id="GUID-CF19EAAE-E754-46B4-B6A0-349AE496E8E3">During development, use <span class="usertext">http://your
host/webappbuilder/?id=stemapp</span> in 2D app or <span class="usertext">http://your
host/webappbuilder/?id=stemapp3d</span> in 3D app to directly access your
widget . This URL helps test the configuration page of the widget. To see the widget in the 2D app, use <span class="usertext">http://your
host/webappviewer/</span> to load stemapp.</p>

<div class="notes" id="GUID-E1435A5B-F65A-4AB8-883F-0AFC0187FC20"><div class="caution"><img class="note_img" src="rsrc/caution.png" alt="Caution" title="Caution"><span>Caution:</span></div><div class="tipbody"><p id="GUID-C8A91185-0134-49FE-B731-0191EA84E4EC">To see the widget in 3D app,  we have to create a 3D app first.   Currently <span class="usertext">http://your host/webappviewer3d/</span> does not work for 3D app.</p></div></div><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>